<template>
  <view>
    <view class="bslist-t">
      <view :class="tabIndex == 0 ? 'bslist-t-ac' : ''" @click="changeTab(0)"
        >A区</view
      >
      <view :class="tabIndex == 1 ? 'bslist-t-ac' : ''" @click="changeTab(1)"
        >B区</view
      >
    </view>
    <view class="bslist-c-box">
      <view class="bslist-c">
        <mescroll-body
          class="water_scroll"
          ref="mescrollRef"
          @init="mescrollInit"
          :down="downOption"
          @down="downCallback"
          @up="upCallback"
        >
          <view
            class="bslist-col xb-card"
            v-for="(item, index) in dataList"
            :key="index"
            @click="itemClick(item)"
          >
            <!-- 	<view class="bslist-col-t">
							<text>{{item.reporter}} | {{item.repairType}}</text>
							<text :style="{color: type[item.state].color}">{{type[item.state].state}}</text>
						</view> -->
            <view class="bslist-col-c">
              <text>编号：{{ item.num }}</text>
               <text>{{item.name}}</text>
            </view>
            <view class="bslist-col-b">
              <text>容量：{{ item.approvalLoad }}kw</text>
              <text>负荷{{ item.curLoad }}kv</text>
            </view>
            <u-icon name="arrow-right" class="icon"></u-icon>
          </view>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      type: [
        {
          state: "待处理",
          color: "#F74D39",
        },
        {
          state: "未缴费",
          color: "#FF5E00",
        },
        {
          state: "已缴费",
          color: "#FF5E00",
        },
        {
          state: "维修中",
          color: "#FF5E00",
        },
        {
          state: "受理完成",
          color: "#44D94B",
        },
        {
          state: "结束受理",
          color: "#F74D39",
        },
      ],
      tabIndex: 0,
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      dataList: [],
      pageInfor: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      stateList: "0",
      parkNum: "A",
    };
  },
  created() {
    this.apis.commonApi.getDict("repair_type").then((res) => {
      console.log(res);
    });
  },
  onShow() {
    this.dataList = [];
    if (this.mescroll) {
      this.mescroll.resetUpScroll();
    }
  },
  methods: {
    changeTab(index) {
      this.dataList = [];
      this.tabIndex = index;
      if (index == 0) {
        this.parkNum = "A";
      } else if (index == 1) {
        this.parkNum = "B";
      }
      this.mescroll.resetUpScroll();
    },
    itemClick(item) {
      // this.$store.commit("repair/setRepairInfo", item)
      this.navTo("/pagesEnergy/transformer/transDataInfo?id=" + item.id);
    },
    /*下拉刷新的回调 */
    downCallback() {
			this.dataList =[]
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.energyApi
        .nyTransCheckList({
          pageNum: page.num,
          pageSize: page.size,
          parkNum: this.parkNum,
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.bslist-t {
  width: 100vw;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  left: 0;
  z-index: 9;

  .bslist-t-ac {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    font-weight: 600;
    font-family: PingFangSC-Medium, PingFang SC;

    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 50%;
      width: 30rpx;
      height: 6rpx;
      background: #6cc04e;
      border-radius: 4rpx;
      transform: translateX(-50%);
    }
  }
}

.bslist-c-box {
  margin-top: 110rpx;
  padding: 20rpx;

  .bslist-c {
    .bslist-col {
      position: relative;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
      margin-bottom: 20rpx;
      padding: 26rpx 64rpx 26rpx 32rpx;

      .icon {
        position: absolute;
        top: 50%;
        right: 20rpx;
        transform: translateY(-60%);
      }

      view {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;

        text:nth-child(2) {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 36rpx;
        }

        &:nth-child(1) {
          padding-bottom: 20rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
        }

        &:nth-child(3) {
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
